<template>
    <view class="pb-safe-area">
        <view class="tab p-4">
            <view class="flex-1 bg rounded-4">
                <view class="flex text-placeholder">
                    <text class="flex-1 py-4 text-center h9" @tap="navClick(item)"
                        :class="item.scene == search.action ? 'text-primary font-weight-600' : ''"
                        v-for="(item, index) in navList" :key="index" :id="item.scene">{{ item.name }}</text>
                </view>
            </view>
        </view>

        <!-- 记录列表 -->
        <view class="p-4 flex flex-column grid-gap-4" v-if="list.length > 0">
            <view class="bg-bg-grey p-4 rounded-4 flex flex-center grid-gap-2" v-for="(item, index) in list"
                :key="item.id">
                <view class="flex-1 flex flex-column grid-gap-2">
                    <text class="text-white font-weight-600">
                        {{ item.remarks }}
                    </text>
                    <text class="h9 text-placeholder"> {{ item.create_time }} </text>
                </view>
                <view class="flex flex-x-flex-end" style="width:100px">
                    <x-money type="danger" unit-type="danger" weight="bold" size="8" :money="item.integral" unit="">
                        <template #prefix>
                            <text class="h10 text-danger"></text>
                        </template>
                        <template #suffix>
                            <text class="h10 text-danger">{{ WEBCONFIG.money_unit_name }}</text>
                        </template>
                    </x-money>
                </view>
            </view>
            <x-more :status="loading" @load="getList()"></x-more>
        </view>
        <view v-else class="vh-50 flex flex-center flex-column">
            <image src="@/static/empty.png" style="width:120px;height: 120px;" />
            <view class="text-primary-light-1 mt-2">暂无余额记录~</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { $page, $http, $message } from "@/utils";
import { useWebConfigStore, useUserStore, useRefs } from "@/stores";
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const loading = ref('loadmore');
const search = ref({
    page: 1,
    action: 'increase',
});
const navList = ref([
    { name: '收入', scene: 'increase' },
    { name: '消费', scene: 'decrease' },
]);
const list = ref([]);
const getList = () => {
    if (loading.value === 'loading' || loading.value === 'nomore') return;
    loading.value = 'loading';
    $http.get('User/bill', {
        data: search.value
    }).then((res: any) => {
        if (res.code === $http.ResponseCode.SUCCESS) {
            const data=res.data;
            list.value = [...list.value, ...data.data];
            search.value.page++;
            if (data.current_page >= data.last_page) {
                nextTick(() => {
                    loading.value = 'nomore';
                })
            }
        }
    }).catch(() => {
        nextTick(() => {
            loading.value = 'nomore';
        })
    }).finally(() => {
        if (loading.value === 'loading') {
            loading.value = 'loadmore';
        }
    })
}
const navClick = (e) => {
    search.value.action = e.scene;
    list.value = [];
    search.value.page = 1;
    loading.value = 'loadmore';
    getList();
}
onLoad(() => {
    getList();
})
onReachBottom(() => {
    getList();
})
</script>
<style lang="scss" scoped>
.tab {
    position: sticky;
    /* #ifdef H5 */
    top: var(--window-top);
    /* #endif */
    /* #ifndef H5 */
    top: 0;
    /* #endif */
    z-index: 999;
    background-color: var(--xl-bg-grey);

    &-body {
        height: 50px;
        line-height: 50px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 20px;

        &-item {
            padding: 0 10px;
            word-break: nowrap;
            white-space: nowrap;
        }
    }
}
</style>
